<!--
 * @Descripttion: 
 * @Version: 
 * @Author: gaohj
 * @Date: 2022-11-01 15:04:00
 * @LastEditors: Please set LastEditors
 * @LastEditTime: 2022-11-03 16:50:49
-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <img src="./sai1.png" width=100 height=100 alt="1" id="one">
    <img src="./sai2.png" width=100 height=100 alt="1" id="two">
    <img src="./sai3.png" width=100 height=100 alt="1" id="three">

    <!-- 必须不断的修改src的路径  -->
    <!-- sai.png固定 1 2 3 4 5 6  -->
    <!-- 随机值    -->
    <!-- 三个骰子 需要生成三个随机值    1~6  -->
    <!-- 间歇定时器 实现没隔多长时间执行依次 -->
    <button id="btn1" onclick="zhuan()">开始</button>
    <button id="btn2" onclick="stop()">停止</button>
    <!-- 连续点击会同时执行多个定时器  多个定时器之间时间间隔小  感到很快 -->
    <!-- 无法停止 就是不知道停止哪一个定时器   -->
    <script>
        var i = 0;
        var btn1 = document.querySelector("#btn1");
        var btn2 = document.querySelector("#btn2");
        function zhuan(){
            i = setInterval("change()",100);
            btn1.removeAttribute("onclick");
            btn2.setAttribute("onclick","stop()");
        }

        function change(){
            var first = Math.floor(Math.random()*6+1);
            var second = Math.floor(Math.random()*6+1);
            var third  = Math.floor(Math.random()*6+1);
            document.getElementById('one').src = './sai'+first+'.png';
            document.getElementById('two').src = './sai'+second+'.png';
            document.getElementById('three').src = './sai'+third+'.png';
        }
        // change()

        function stop(){
            clearInterval(i);
            btn2.removeAttribute("onclick");
            btn1.setAttribute("onclick","zhuan()");
        }
    </script>

</body>
</html>